<template>
    <van-overlay :z-index="9999" :show="isShow" @click="closeHandle" :lock-scroll="false">
        <div class="user-box" @click.stop>
            <div class="box-border">
                <div class="box-title">
                    <div><a @click="closeHandle">{{ $t('circle_kg_13') }}</a></div>
                    <div>{{ $t('select_user') }}</div>
                    <div><a :class="{'btn-class': selectIdList.length > 0}" @click="changeSelect">{{ $t('circle_kg_14') }}</a></div>
                </div>
                <div>
                    <van-search @search="onPulldownTop" v-model="search" :placeholder="$t('login_pls_name')"  @input="searchIpt"/>
                </div>
                <div class="box-item-list">
                    <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                        <van-list
                        v-model="isLoading"
                        :finished="finished"
                        :finished-text="(finished&&total>0) ? $t('no_more') : ''"
                        loding-text="loading"
                        @load="getUserList"
                        style="padding-bottom: 56px;"
                        >

                            <van-checkbox-group v-model="selectIdList">
                                <div class="box-item" v-for="(data, index) in userList" :key="index">
                                    <div><van-checkbox :name="data.usrEntId"></van-checkbox></div>
                                    <div @click="selectUser(data)">{{ data.usrDisplayBil }}</div>
                                </div>
                            </van-checkbox-group>
                            <div v-if="!isLoading && total === 0" style="height:100%;">
                                <div class="box-table" style="width:100%;height:100%;">
                                    <div class="box-table-cell" style="text-align: center;">
                                        <div class="no-data">
                                            <img src="../../../static/images/no-data.png" alt=""/>
                                            <p class="color999">{{ $t("no_data") }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </van-list>
                    </van-pull-refresh>
                </div>
            </div>
        </div>
        <common-loading :isLoading="isLoading"></common-loading>
    </van-overlay>
</template>

<script>
import { Toast, Image, Dialog, Checkbox, CheckboxGroup, Search, Tab, Tabs, SwipeCell, Button, Icon, Overlay, Field, Collapse, CollapseItem, Loading } from 'vant';
export default {
    name: 'NewSelectUser',
    components: {
        vatToast: Toast,
        vanImage: Image,
        vanDialog: Dialog,
        vanCheckbox: Checkbox,
        vanCheckboxGroup: CheckboxGroup,
        vanOverlay: Overlay,
        vanCollapse: Collapse,
        vanCollapseItem: CollapseItem,
        vanLoading: Loading,
        vanSearch: Search
    },
    props: {
        isShow: {
            type: Boolean,
            default: false
        },
        defaultSelectedIdList: {
            type: Array,
            default() {
                return [];
            }
        }
    },
    data() {
        return {
            selectIdList: [],
            userList: [],
            search: '',
            isLoading: false,
            selectMap: new Map(),
            isTop: false,
            pageNo: 0,
            total: 0,
            isDefaultHandle: false,
            finished: false,
            isRefresh: false
        };
    },
    methods: {
        defaultHandle() {
            this.selectIdList = [].concat(this.defaultSelectedIdList);
        },
        getUserList(option) {
            let data = {
                searchText: this.search,
                usgEntId: 0
            };
            this.$axios.post(`/app/api/user/search?pageNo=${this.pageNo}&pageSize=20`, data).then(res => {
                if (res.data.results && res.data.results.length !== 0) {
                    if (option && option === 'refresh') {
                        this.userList = res.data.results;
                    } else {
                        this.userList = [...this.userList, ...res.data.results];
                    }
                } else {
                    this.userList = [];
                }
                // if (this.isDefaultHandle) {
                //     this.defaultHandle();
                // }
                this.total = res.data.totalRecord;
                this.isLoading = false;
                this.pageNo++;
                if (this.userList.length >= this.total) {
                    this.finished = true;
                }
            });
        },
        selectUser(data, isCheckbox) {
            let index = this.selectIdList.indexOf(data.usrEntId);
            if (index === -1) {
                this.selectIdList.push(data.usrEntId);
            } else {
                this.selectIdList.splice(index, 1);
            }
            // if (index === -1) {
            //     if (isCheckbox) {
            //         this.selectMap.delete(data.usrEntId);
            //     } else {
            //         this.selectIdList.push(data.usrEntId);
            //         this.selectMap.set(data.usrEntId, { id: data.usrEntId, name: data.usrDisplayBil });
            //     }
            // } else {
            //     if (isCheckbox) {
            //         this.selectMap.set(data.usrEntId, { id: data.usrEntId, name: data.usrDisplayBil });
            //     } else {
            //         this.selectIdList.splice(index, 1);
            //         this.selectMap.delete(data.usrEntId);
            //     }
            // }
        },
        changeSelect() {
            if (!this.isLoading && this.selectIdList.length > 0) {
                this.isLoading = true;
                // this.$emit('changeMap', this.selectMap);
                let objList = [];
                // this.selectMap.forEach((value) => {
                //     // objList.push({ id: value.usrEntId, name: value.usrDisplayBil });
                //     objList.push(value);
                // });
                this.selectIdList.forEach(id => {
                    for (let i = 0; i < this.userList.length; i++) {
                        let item = this.userList[i];
                        if (item.usrEntId === id) {
                            objList.push({ id: id, name: item.usrDisplayBil });
                            break;
                        }
                        if (i + 1 === this.userList.length) {
                            objList.push({ id: id, name: 'Not Name' });
                        }
                    }
                });
                this.$emit('changeIdList', this.selectIdList);
                this.$emit('changeObjList', objList);
                this.closeHandle();
            }
        },
        closeHandle() {
            // if (this.defaultSelectedIdList.length === 0) {
            //     this.selectIdList = [];
            //     this.selectMap = new Map();
            // }
            this.selectIdList = [];
            //支持同步
            this.$emit('update:isShow', !this.isShow);
            //防止父组件未同步时则抛出事件
            this.$emit('close', !this.isShow);
            this.isLoading = false;
        },
        searchIpt() {
            let data = {
                searchText: this.search,
                usgEntId: 0
            };
            this.$axios.post(`/app/api/user/search?pageNo=${this.pageNo}&pageSize=20`, data).then(res => {
                this.userList = res.data.results;
                this.total = res.data.totalRecord;
                this.isTop = true;
                this.isLoading = false;
                this.onFetching = this.userList.length >= this.total;
            });
        },
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageNo = 1;
                this.getUserList('refresh');
                this.isRefresh = false;
            }, 900);
        }
    },
    watch: {
        isShow() {
            if (this.isShow) {
                if (this.userList.length === 0) {
                    this.onPulldownTop();
                }
                if (this.defaultSelectedIdList.length > 0) {
                    this.defaultHandle();
                }
            }
        },
        search() {
            if (this.search === null || this.search === '' || this.search.length === 0) {
                this.userList = [];
                this.isLoading = true;
                this.onPulldownTop();
            }
        },
        defaultSelectedIdList() {
            // if (this.userList === 0) {
            //     this.isDefaultHandle = true;
            // } else {
            //     this.defaultHandle();
            // }
            this.defaultHandle();
        }
    }
};
</script>

<style scoped lang="less">
    /deep/.van-overlay {
        z-index: 999 !important;
    }
    /deep/.downLoading {
        background: #fff;
    }
    .user-box {
        background: #fff;
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 90%;
        border-radius: 16px 16px 0 0;
        .box-border {
            padding: 0 15px;
            height: 100%;
            .box-title {
                height: 48px;
                display: flex;
                align-items: center;
                &>div:first-child{
                    flex: 1;
                    &>a {
                        padding-right: 10px;
                    }
                }
                &>div:last-child {
                    flex: 1;
                    text-align: right;
                    &>a {
                        padding-left: 10px;
                        color: #ACACAC;
                    }
                }
                &>div:nth-child(2) {
                    flex: 2;
                    text-align: center;
                }
                .btn-class {
                    color: #000 !important;
                }
            }
            /deep/.van-search {
                padding: 0 0 10px 0;
            }
            .box-item-list {
                overflow: hidden;
                height: calc(100% - 92px);
                .over-hidden {
                    overflow: hidden;
                }
                /deep/.van-loading {
                    text-align: center;
                    height: 100%;
                }
                /deep/.van-loading__spinner {
                    height: calc(100% - 100px) !important;
                }
                .box-item {
                    display: flex;
                    align-items: center;
                    height: 50px;
                    &>div:first-child {
                        width: 50px;
                    }
                    &>div:last-child {
                        flex-grow: 1;
                    }
                    /*border-bottom: 1px #ACACAC solid;*/
                    /*&:last-child {*/
                    /*    border: none;*/
                    /*}*/
                }
            }
        }
    }
</style>
